import React, { useMemo } from 'react';
import { Form, Input } from 'antd';
import useControlOptions from '../../hooks/useControlOptions';
import OptionSetting from '../components/optionSetting/OptionSetting';
import useFdStore from '../../hooks/useFdStore';
import { TabsProps } from './Tabs';
import { flatControl } from '../../util';
const Controller = () => {

  const {
    state: { list },
  } = useFdStore();

  const { options, changeControlProps, id } = useControlOptions<TabsProps>('tabsProps');

  const formItems = useMemo(() => {

    const _l = list.filter(item => item.id
      !== id && (item?.options?.formItemProps?.name || item?.options?.name));

    return [
      {
        name: 'linkComponent',
        label: '关联组件',
        type: 'select',
        options: {
          mode: "multiple",
          fieldNames: { label: 'typeName', value: 'typeCode' },
          dataSource: _l?.map((item: any) => ({ typeCode: item?.options?.formItemProps?.name || item?.options?.name, typeName: item?.options?.formItemProps?.label || item.options?.title }))
        }
      }
    ];
  }, [list]);


  return (
    <>
      <Form.Item label='数据绑定ID'>
        <Input readOnly value={id} />
      </Form.Item>
      <OptionSetting editInModal mustOne otherProps="tabsProps" formItems={formItems} changeControlProps={(_, value) => {
        changeControlProps('tabsProps', {
          tabs: value.dataSource
        }, true);
      }} options={{
        dataSource: options.tabsProps.tabs as any
      }} />
    </>
  );
};

export default Controller;